<template>
  <div class="line1">
    <div
      :id='id'
      :data='data'
      :isShow="isShow"
      style="width: 100%;height:330px;"
    >
    </div>
    <!-- 
    <div
      style="width: 100%;height:550px;"
      class="echarts-none"
      v-else
    >
      <div>
        <img
          src="~@/assets/none.png"
          alt=""
        >
        <div class="echarts-text">
          暂无数据
        </div>
      </div>
    </div>
    <div
      :id='id'
      :data='data'
      v-show="false"
    ></div> -->

  </div>
</template>

<script>
import { setStore, getStore } from "@/utils/common";
export default {
  data() {
    return {
      myChart: null,
      imgList: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initData(this.id, this.data);
    });
  },
  props: {
    id: {
      type: String,
      default: "line"
    },
    data: {
      type: Object,
      default: {}
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    initData(id, data) {
      if (data) {
        let _this = this;
        if (this.myChart) {
          this.myChart.clear();
        }
        let moduleChart = document.getElementById(id);
        this.myChart = this.$echarts.init(moduleChart);
        let img = "";
        //deskLightRate 是页面上需要制成图片的曲线
        if (
          id.match(/(\w+?)(\d+)\b/)[1] === "logStepOne" ||
          id.match(/(\w+?)(\d+)\b/)[1] === "logLightRate"
        ) {
          setTimeout(() => {
            img = this.myChart.getConnectedDataURL({
              pixelRatio: 2,
              backgroundColor: "#fff"
            });
            setStore(id, img);
          });
        }
        this.myChart.showLoading();
        this.myChart.setOption(data);
        this.myChart.hideLoading();
        window.removeEventListener("resize", this.resizeMyChart);
        window.addEventListener("resize", this.resizeMyChart);
      } else {
        this.myChart.showLoading();
      }
    },
    resizeMyChart() {
      this.myChart.resize();
    }
  },
  watch: {
    data: {
      handler() {
        this.$nextTick(() => {
          this.initData(this.id, this.data);
        });
      },
      deep: true
    }
    // isShow: {
    //   handler() {
    //     this.$nextTick(() => {
    //       this.initData(this.id, this.data);
    //     });
    //   },
    //   deep: true
    // }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.clear();
      window.removeEventListener("resize", this.resizeMyChart);
    }
  }
};
</script>

<style>
.line1 {
  display: flex;
  justify-content: center;
}
.echarts-none {
  display: flex;
  justify-content: center;
  align-items: center;
}
.echarts-text {
  text-align: center;
  color: #a0a0a0;
  font-size: 16px;
}
</style>
